<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="element-plus/index.css" />
		<script src="element-plus/index.full.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id='app'>
			<el-card style="max-width: 500;margin: 50px auto;">
				<el-form ref='registerForm' label-width='100' :rules='rules' :model='form'>
					<el-form-item label='用户名' prop='user'>
						<el-input v-model='form.user' placeholder='请输入用户名'></el-input>
					</el-form-item>
					<el-form-item label='密码' prop='psw'>
						<el-input v-model='form.psw' placeholder='请输入密码' type='password'></el-input>
					</el-form-item>
					<el-form-item label='确认密码' prop='repsw'>
						<el-input v-model='form.repsw' placeholder='请确认密码' type='password'></el-input>
					</el-form-item>
					<el-form-item label='邮箱'prop='email'>
						<el-input v-model='form.email' placeholder='请输入邮箱'></el-input>
					</el-form-item>
					<el-form-item label='性别' prop='sex'>
						<el-radio-group v-model='form.sex'>
							<el-radio :value='1'>男</el-radio>
							<el-radio :value='2'>女</el-radio>
						</el-radio-group>
					</el-form-item>

					<el-form-item label='兴趣爱好' prop='hobby'>
						<el-checkbox-group v-model='form.hobby'>
							<el-checkbox value='唱歌'>唱歌</el-checkbox>
							<el-checkbox value='跳舞'>跳舞</el-checkbox>
							<el-checkbox value='运动'>运动</el-checkbox>
							<el-checkbox value='阅读'>阅读</el-checkbox>
						</el-checkbox-group>
					</el-form-item>

					<el-form-item label='出生日期'prop='birth'>
						<el-date-picker value-format='YYYY/MM/DD' v-model='form.birth' placeholder='选择日期'>
						</el-date-picker>
					</el-form-item>

					<el-form-item label='城市' prop='city'>
						<el-select v-model='form.city' placeholder='选择城市'>
							<el-option value='重庆'>重庆</el-option>
							<el-option value='广州'>广州</el-option>
							<el-option value='上海'>上海</el-option>
						</el-select>
					</el-form-item>

					<el-form-item>
						<el-button @click="post" type='primary'>注册</el-button>
						<el-button>重置</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						form: {
							user: '',
							psw: '',
							repsw: '',
							email: '',
							sex: '',
							hobby: [],
							birth: '',
							city: ''
						},
						rules: {
							user: [{
								required: true,
								message: '请输入用户名',
								trigger: 'blur'
							}],
							psw: [{
								required: true,
								message: '请输入密码',
								trigger: 'blur'
							}, {
								min: 6,
								message: '请输入至少6位密码',
								trigger: 'blur'
							}],
							repsw: [{
									required: true,
									message: '请确认密码',
									trigger: 'blur'
								},
								{
									validator: this.confirmPsw,
									trigger:['change','blur']
								}
							],
							email:[
								{
									required: true,
									message: '请确认邮箱',
									trigger: 'blur'
								},
								{
									type:'email',
									message: '请输入正确的邮箱格式',
									trigger:['change','blur']
								}
							],
							sex:[
								{
									required: true,
									message: '请选择输入性别',
									trigger: 'change'
								}
							],
							hobby:[
								{
									required: true,
									message: '请选择兴趣爱好',
									trigger: 'change'
								}
							],
							birth:[
								{
									required: true,
									message: '请选择出生日期',
									trigger: 'change'
								}
							],
							birth:[
								{
									required: true,
									message: '请选择城市',
									trigger: 'change'
								}
							]
						}
					}
				},
				methods: {
					post(){
						this.$refs['registerForm'].validate(flag=>{
							if(flag){
								alert('校对通过，提交数据')
							}else{
								alert('未通过校对')
							}
						})
					},
					confirmPsw(rule, value, callback) {
						if (value != this.form.psw) {
							callback(new Error('两次输入的密码不一致'))
						} else {
							callback()
						}
					}
				}
			}).use(ElementPlus).mount('#app')
		</script>
	</body>
</html>
